<template>
	<view >
		
		<view style="background: #5d5d5d;padding-top: 60rpx;">
			<view class="row" style="height: 180rpx;background: none;">
				<view style="width: 20%;margin-left: 10rpx;">
					<image :src="userinfo.avatarUrl" @click="updateHead" style="width: 160rpx;height: 160rpx;border-radius: 50%;"></image>
				</view>
				<view  style="margin-left: 20rpx;width: 70%;align-items: center;display: flex;">
					<view class="assistant_ly" >
						<text style="flex-direction: inherit;font-size: 40rpx;color: white;">{{userinfo.nickName==null?userinfo.username:userinfo.nickName}}</text>
						<text style="flex-direction: inherit;font-size: 23rpx;color: #e5e5e5;margin-top: 10rpx;">Java掌上资讯号：{{userinfo.username==null?userinfo.username:userinfo.username}}</text>
					<text style="flex-direction: inherit;font-size: 23rpx;color: #e5e5e5;margin-top: 10rpx;">积分：{{points}}</text>
					
					</view>
				</view>
				
			<!-- 	<view   style="width: 10%;align-items: center;display: flex;">
					<image src="../../static/edit.png" style="width: 50rpx;height: 50rpx;"></image>
				</view> -->
			</view>
			<view class="row" style="background: none;">
				<view style="margin-left: 20rpx;" @click="writeJj">
					<text style="color: white;font-size: 27rpx;">{{myselfInfo}}</text>
				</view>
			</view>
			
			
			<!-- <view style="display: flex;padding-bottom: 20rpx;" >
				<view style="margin-left: 20rpx;text-align: center;color: #FFFFFF;font-size: 25rpx;">
					 <view>10</view>
					 <view>浏览</view>
				</view>
				<view style="margin-left: 20rpx;text-align: center;color: #FFFFFF;font-size: 25rpx;">
					 <view>8</view>
					 <view>收藏</view>
				</view>
				<view style="margin-left: 20rpx;text-align: center;color: #FFFFFF;font-size: 25rpx;">
					 <view>12</view>
					 <view>喜欢</view>
				</view>
			</view> -->
		</view>
		
			<view style="margin-left: 20rpx;margin-top: 25rpx;">
				<text>常用功能</text>
			</view>
			
			<view class="box">
						<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @click="toOrderType(row.name)">
							<view class="icon">
								<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
								<image :src="'../../static/'+row.icon"></image>
							</view>
							{{row.name}}
						</view>
			</view>
		
	<!-- 	<view style="margin-left: 20rpx;margin-top: 25rpx;">
			<text>考试管理</text>
		</view>
		
		<view class="box">
					<view class="label" v-for="(row,index) in examLise" :key="row.name" hover-class="hover" @click="toOrderType(row.name)">
						<view class="icon">
							<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
							<image :src="'../../static/'+row.icon"></image>
						</view>
						{{row.name}}
					</view>
		</view> -->
		
		
		
		<view  >
			<view style="margin-top: 15rpx;">
				
				<view class="row">
					<view class="row_logo">
						<image src="../../static/login.png" mode=""></image>
					</view>
					<view class="row_right">
						<view>
							<text>绑定账号：{{userinfo.username}}</text>
						</view>
					</view>
				</view>
			<!-- 	<view class="row">
					<view class="row_logo">
						<image src="../../static/login.png" mode=""></image>
					</view>
					<view class="row_right">
						<view>
							<text>绑定账号：{{userinfo.username}}</text>
						</view>
					</view>
				</view> -->
				
				
				
				
				
				
				
			
			
			
			</view>
			
			
		</view>
			
		
		<button style="margin-top: 30rpx;margin: 14rpx;" @click="logout()">退出</button>
	</view>
	
	
	
</template>

<script>
	export default {
		components:{
		},
		onLoad(options) {

			this.userinfo=uni.getStorageSync('userKey');
		},
		mounted() {
			this.userinfo=uni.getStorageSync('userKey');
		},
		onShow() {
			this.userinfo=uni.getStorageSync('userKey');
			console.log(this.userinfo);
		},
		props:{
			points:'',
			myselfInfo:''
		},
		data() {
			return {
				userinfo:{},
				web:'前端',
				 //滑块的高度(单位px)
				scrollViewTop:0,
				intoView:'',
				tabIndex: 0,	//选中标签栏的序列
				swiperHeight: 0,
				orderTypeLise: [
					{
						name: '积分规则',
						icon: 'jifen.png',
						//badge: 1
					},
					{
						name: '我的文章',
						icon: 'article.png',
						//badge: 2
					},
					{
						name: '浏览历史',
						icon: 'lishi.png',
						//badge: 61
					},
					
					{
						name: '我的收藏',
						icon: 'collect.png',
						//badge: 9
					}
				],
				
				examLise: [
					{
						name: '考试记录',
						icon: 'chat.png',
						//badge: 1
					},
					{
						name: '错题记录',
						icon: 'wrong.png',
						//badge: 2
					},
					{
						name: '题目收藏',
						icon: 'collectd.png',
						//badge: 61
					},
					
					{
						name: '考试笔记',
						icon: 'shuti.png',
						//badge: 9
					}
				],
				
				tabBars:[
					{
						name: '前端',
						id: 'biji'
					},
					{
						name: '收藏',
						id: 'shoucang'
					},
					{
						name: '喜欢',
						id: 'xihuan'
					}
				],
			}
		},
		methods: {
			setSwiperHeight() {
			  let element = "#content-wrap" + this.tabIndex;
			  let query = uni.createSelectorQuery().in(this);
			  query.select(element).boundingClientRect();
			  query.exec((res) => {
			    if (res && res[0]) {
			      this.swiperHeight = res[0].height;
				  console.log('this.swiperHeight', this.swiperHeight-100)
			    }
			  });
			},
			
			toOrderType(name){
				if(name=='我的文章'){
					uni.navigateTo({
						url:'../../subpkg/my-blog/my-blog'
					})
				}else if(name=='浏览历史'){
					uni.navigateTo({
						url:'../../subpkg/browse-history/browse-history'
					})
				}
				else if(name=='积分规则'){
					uni.navigateTo({
						url:'/subpkg/blog-detail/blog-detail?id=1572505005884313600'
					})
				}else if(name=='我的收藏'){
					uni.navigateTo({
						url:'../../subpkg/my-collect/my-collect'
					})
				}
				
			},
			
			toggleTab(index){
							this.tabIndex = index;
							this.scrollViewTop = index;
							this.intoView = this.tabBars[index].id;
							this.web = this.tabBars[index].name;
							console.log('this.scrollViewTop',this.scrollViewTop);
							 //动态设置swiper的高度，使用nextTick延时设置
							      this.$nextTick(() => {
							        this.setSwiperHeight();
							      });
								this.$refs.contentRef[0].open();
						},
						//滑动切换swiper
						tabChange(e){
							const tabIndex = e.detail.current;
							this.tabIndex = tabIndex;
								this.intoView = this.tabBars[tabIndex].id;
								this.web = this.tabBars[tabIndex].name;
							this.$nextTick(() => {
							  this.setSwiperHeight();
							});
							
							this.$refs.contentRef[0].open();
							
						},
			
			erweima(){
			},
			updateHead(){
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						uni.showLoading({
							title:'正在上传...'
						})
						uni.uploadFile({
							url: uni.$http.baseUrl+'/sys_user/change_header', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header:{authorization:uni.getStorageSync('authorization')},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data)
								this.userinfo = JSON.parse(uploadFileRes.data)
								uni.setStorageSync('userKey',this.userinfo);
								uni.hideLoading();
							},
						 });
					}
				})
			},
			logout: function() {
				  console.log('开始');
				  uni.removeStorageSync('userKey');
				  uni.removeStorageSync('authorization');
				  console.log('开始------------');
					this.$emit('lagoutBack')
			},
			
			writeJj(){
				uni.navigateTo({
					url:'/subpkg2/context-write/context-write'
				})
			},
			
			goToMyArticle(){
				uni.navigateTo({
					url:'../../subpkg/my-blog/my-blog?authorId='+uni.getStorageSync('userKey').id
				})
			},
			goToMyCollect(){
				uni.navigateTo({
					url:'../../subpkg/my-collect/my-collect'
				})
			}
		}
	}
</script>

<style lang="scss">
  .assistant_ly{
  	   margin-left: 10rpx;
    text-align: left;
    display:flex;
    flex-direction:column;
    border-radius: 50rpx;
    justify-content: center;
  }
  
  
  	.line{
  		width: 100%;
  		height: 10px;
  	}
  	.row {
  		background: white;
  		display: flex;
  		width: 100%;
  		height: 50px;
  
  		.row_logo {
  			width: 18%;
  			display: flex;
  			align-items: center;
  
  			image {
  				width: 25px;
  				height: 25px;
  				margin: auto;
  				border-radius: 5px;
  			}
  		}
  
  		.row_right {
  			position: relative;
  			height: 100%;
  			width: 84%;
  			display: flex;
  			align-items: center;
  
  			border: {
  				bottom: 1px solid #DDDDDD;
  			}
  
  			text {
  				font-size: 12px;
  				font-family: 'syht';
  				display: block;
  			}
  
  		}
  
  
  
  	}
  
  	.row:last-child {
  		.row_right {
  			border: 0;
  		}
  	}
	
	
	.swiper-tab-list{
			color: #969696;
			font-weight: bold;
			display: inline-block;
			padding-left: 30upx;
			padding-bottom: 20upx;
			padding-right: 20upx;
			
		}
	
		
		.tab-home{
			background-color: #FFFFFF;
			width: 100%;
		}
		
		.active .swiper-tab-line{
			margin-top: 1rpx;
			border-bottom: 6upx solid #FEDE33;
			width: 100%;
			border-radius: 20upx;
		}
		.uni-swiper-tab{
			border-bottom: 1upx solid #eeeeee;
	     	white-space: nowrap; 
		}
		.swiper-item{
			//height: 100%;
			//height: 100%;
			 padding-top: 3rpx;
			
		}
		
.box {
		width: 96%;
		background-color: #feffff;
		// border-radius: 15upx;
		/*  阴影 */
		// box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin: 15upx 2% 0upx 2%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
			flex-wrap: wrap;
	
		// 包含图片，数字气泡，图标的view
		.label {
		    // padding-top:10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 16vw;
			color: #666666;
			font-size: 26upx;
	
			.icon {
				position: relative;
				width: 6vw;
				height: 6vw;
				margin: 0 1vw 2vw 1vw;
	
				// 数字气泡
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
	
				// 文字上的图片
				image {
					width: 6vw;
					height: 6vw;
					z-index: 9;
				}
			}
		}
	
	}
</style>
